Tableaux et médias

HTML approfondi

DSP - USAL33

Tableaux

Structure de base

<table>
    <tr>
        <td>Ligne 1, Col 1</td>
        <td>Ligne 1, Col 2</td>
    </tr>
</table>
Balise Rôle
<table> Conteneur
<tr> Ligne (table row)
<td> Cellule de données
<th> Cellule d'en-tête

Structure complète

<table>
    <thead>
        <tr><th>Nom</th><th>Âge</th></tr>
    </thead>
    <tbody>
        <tr><td>Dupont</td><td>25</td></tr>
        <tr><td>Martin</td><td>30</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Moyenne</td><td>27.5</td></tr>
    </tfoot>
</table>

<thead> en-tête · <tbody> corps · <tfoot> pied

<th> vs <td>

Balise Usage Style par défaut
<th> Cellule d'en-tête Gras + centré
<td> Cellule de données Normal + à gauche

Le <th> annonce un en-tête : les lecteurs d'écran relient chaque donnée à sa colonne.

Fusion de cellules

<tr>
    <th colspan="2">Coordonnées</th>
</tr>
<tr>
    <td>Nom</td><td>Dupont</td>
</tr>
  • colspan : fusionne des colonnes (horizontal)
  • rowspan : fusionne des lignes (vertical)

Bonnes pratiques tableaux

À faire

  • <table> uniquement pour des données tabulaires
  • Toujours <thead> + <tbody> · <th> pour les en-têtes
  • Styliser en CSS

À éviter

  • <table> pour la mise en page (→ Flexbox / Grid)
  • Attributs obsolètes : border, cellpadding, cellspacing

Médias

<img> — Images

Attributs obligatoires :

  • src : chemin de l'image
  • alt : texte alternatif (accessibilité, SEO)
<img src="photo.jpg" alt="Description" width="600" height="400">

Optionnels : width / height, loading="lazy"
Formats : WebP, JPEG (photos), PNG (transparence)

<audio> et <video>

<audio controls>
    <source src="musique.mp3" type="audio/mpeg">
    Navigateur non compatible.
</audio>

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
</video>

controls · autoplay (⚠️ mauvaise UX) · loop

<iframe> — Contenus embarqués

<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        width="560" height="315"
        title="Vidéo YouTube" allowfullscreen>
</iframe>

Usages : vidéos YouTube, cartes Google Maps…

⚠️ Sécurité : éviter d'embarquer des contenus non fiables

Médias responsives

img, video {
    max-width: 100%;  /* ne dépasse jamais le conteneur */
    height: auto;     /* conserve les proportions */
}

À appliquer sur toutes les images. (Détaillé plus tard avec le responsive.)